<template>
  <a-scrollbar style="height: 530px; overflow: auto">
    <div class="con">
      <div class="item mb10" v-if="msgList.length > 0" v-for="(item, index) of msgList" :key="index">
        <div class="top">
          <a-space>
            <div class="head-portrait">{{ item.createUname.slice(0, 1) }}</div>
            <div style="padding: 1px 3px; background-color: #165dff; color: white">{{ item.belong }}</div>
            <div>{{ item.createUname }}</div>
            <div class="time">{{ $setTime(item.gmtCreate) }}</div>
          </a-space>
        </div>
        <div class="bottom"> {{ item.leaveMsg }}</div>
      </div>
      <a-empty v-else description="暂无留言信息" />
    </div>
  </a-scrollbar>
  <a-space class="mt10">
    <a-input class="fl" v-model="remark" @press-enter="submit" placeholder="请输入" :style="{ width: '280px' }" />
    <a-button class="ml10 fl" type="primary" @click="submit">发送</a-button>
  </a-space>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { listTaskLeaveMsgs, createTaskLeaveMsg } from '@/api/task'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps(['info'])
  let remark = ref('')
  let msgList: any = ref([])
  const getList = async (info?: any) => {
    const res: any = await listTaskLeaveMsgs({ id: props.info.id ? props.info.id : info.id })
    if (res) {
      msgList.value = res?.data || []
    }
  }

  const submit = async () => {
    let params = {
      leaveMsg: remark.value,
      taskId: props.info.id,
    }
    const res: any = await createTaskLeaveMsg(params)
    if (res) {
      remark.value = ''
      Message.success('留言成功')
      getList()
    }
  }

  defineExpose({ getList })
</script>

<style lang="less" scoped>
  .con {
    height: 570px;
    // border: 1px solid red;
    padding: 5px;
    .item {
      .top {
        font-size: 12px;
        .head-portrait {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: black;
          background-color: #d3d3d4;
          border-radius: 50%;
        }
        .time {
          color: #7f7f7f;
        }
      }
    }
  }
</style>
